<body>

<h2>Why?</h2>
<div class="text">
Lately I was discussing about programming a flash-based multiuser game using sharedObjects.<br />
I'm not so fond of Flash so I thought: Flash can communicate with Javascript. So why not implement the game in Javascript and do only the multiplayer-communication in flash?<br />
I created jsSO to allow the clients to push data to the server and notify other clients immediately about changes.<br />
So this library allows programming of realtime games, chats etc.
</div>

<h2>How?</h2>
<div class="text">
There is no easy way to get a notification in Javascript on the client about changes on the server. 
So the solution is to use Flash and let it handle the update notifications.<br />
You have to install the Flash server from Adobe or se the <a href="http://osflash.org/red5" target="_blank">free java alternative: Red5</a> as in the example below.<br />
<br />
The data-transfer and the connection to the server are maintained by a simple embedded Flashmovie in your page.
The communication with other clients runs through the local Flashmovie and the Red5-Server.<br />
The data-flow between two clients looks like this:<br />
<br />
Javascript/jsSO <-> Flashmovie <-> Red5-Server <-> Flashmovie <-> Javascript/jsSO
</div>

<h2>Dependencies</h2>
<ul>
	<li>Javascript-Libraries: jquery + swfobject
	<li>Flash-Remoting-Server: red5 or similar
</ul>


<h1>Demos</h1>
<div class="text">
I'm currently working on improving jsSO, so if the demos are not working please come back later, or try them on your own red5-server! :)<br />
Open 2 Windows with the same demo and see how fast e.g. drawing in one window shows up on the other window!<br />
<a href="/jsSO/simple.htm" target="_blank">Simple Button Example</a><br />
<a href="/jsSO/draw.htm" target="_blank">Draw</a><br />
<a href="/jsSO/chat.htm" target="_blank">Chat</a><br />
</div>


<h1>Downoad</h1>
<div class="text">
2009-02-24: <a href="/jsSO/jsSO-0.1.zip">Version 0.1</a>
</div>


<h1>Usage</h1>

<h2>Include the Javascripts</h2>
<pre>
&lt;script type="text/javascript" src="js/swfobject.js"&gt;&lt;/script&gt;
&lt;script type="text/javascript" src="js/jquery.js"&gt;&lt;/script&gt;
&lt;script type="text/javascript" src="js/jsSO.js"&gt;&lt;/script&gt;
</pre>

<h2>Example Usage</h2>
<pre>
// Connect to to a shared object Handler (SOSample) on the Red5-Server and
// use the objectName "draw". The objectName is identical to a namespace
// for your data or a chat-room.
// SOSample is the simplest shared object example of the Red5-server
jsSO.connect('draw', 'rtmp://localhost/SOSample');

// On button click set someVar in the shared object
$(':button').live('click', function(){
    jsSO.set('someVar', 'value');
});

// Listen to changes on the shared object
// event = A jquery event object
// updates = If a var is updated it is set in the updates-object.
//           See code below for usage
// data = All data in the object
jsSO.onSync(function(event, updates, data) {
    if (updates.someVar) {
        // someVar was updated
        console.log(data.someVar);
    }
});
</pre>

<h2>Other useful functions</h2>
<pre>
// get the current data of the shared object
var data = jsSO.getData();

// get the last updates on the shared object
var updates = jsSO.getUpdates();
</pre>



<h1>Future Improvements</h1>
<ul>
    <li>Allow multiple connections with different objectNames to the Server
    <li>Allow calling functions on the server
    <li>Detect connect/disconnect to sharedObject
	<li>Automatic reconnect to sharedObject on connection loss
    <li>Fallback in case flashplugin is not present
</ul>

<h1>For comments etc.</h1>
<div class="text">
please see the announcement on <a href="http://ajaxian.com/archives/jsso-flash-shared-objects-in-javascript" target="_blank">ajaxian.com</a>
</div>

</body>